<template>
  <span @click="handleClick">打开热力图</span>
</template>

<script setup>
import { toRefs } from 'vue'
import { useMapStore } from '@/stores/map' // 使用pinia
const { map } = toRefs(useMapStore())

let lock = false
function handleClick() {
  //创建一个热力图图层
  var vector = new ol.layer.Heatmap({
    title: 'heatLayer',
    //矢量数据源（读取本地的KML数据）
    source: new ol.source.Vector({
      url: './event.kml',
      format: new ol.format.KML({
        extractStyles: false
      })
    }),
    //热点半径
    radius: 30,
    //模糊尺寸
    blur: 30
  })
  let layerArr = map.value.getLayers().getArray()
  let layersfilter = layerArr.filter((item) => {
    return item.values_.title == 'heatLayer'
  })
  if (layersfilter.length < 1) {
    map.value.addLayer(vector)
  } else {
    layersfilter.forEach((item) => {
      item.setVisible(true)
    })
  }
}
</script>
